<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view class="detail-header flex-row">
            <view class="header flex-grow-1">
                <text @tap="income" :class="['income', data.status==1?'gain':'']">收入</text>
            </view>
            <view class="header flex-grow-1">
                <text @tap="expenditure" :class="['income', data.status==2?'hand':'']">支出</text>
            </view>
        </view>
        <view class="income-list" v-if="data.list.length>0">
            <view class="income-one" v-for="(item,index) in data.list" :key="item.id">
                <view class="income-road">{{item.content}}</view>
                <view class="flex-row">
                    <view class="flex-grow-1" style="color:#ff6f28" v-if="data.status==1">+{{item.integral}}积分</view>
                    <view class="flex-grow-1" style="color:#ff6f28" v-else>{{item.integral}}积分</view>
                    <view class="flex-grow-0" style="color:#999999;font-size:9pt;margin-top:6upx;">{{item.content_1}} 时间 {{item.addtime}}</view>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = !1, a = !1;
	export default {
		data() {
			return {
				data: {
        gain: !0,
        p: 1,
        status: 1,
				list: []
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e), t = !1, a = !1;
        var n = this;
        e.status && n.setData({
            status: e.status
        });
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this), this.loadData();
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(a) {
        myVue.getApp.page.onReachBottom(this);
        var e = this;
        t || e.loadData();
    },
		methods: {
			income: function() {
        myVue.getApp.core.redirectTo({
            url: "/pages/integral-mall/detail/index?status=1"
        });
    },
    expenditure: function() {
        myVue.getApp.core.redirectTo({
            url: "/pages/integral-mall/detail/index?status=2"
        });
    },
    loadData: function() {
        var e = this;
        if (!a) {
            a = !0, myVue.getApp.core.showLoading({
                title: "加载中"
            });
            var n = e.data.p;
            myVue.getApp.request({
                url: myVue.getApp.api.integral.integral_detail,
                data: {
                    page: n,
                    status: e.data.status
                },
                success: function(a) {
                    if (0 == a.code) {
                        var o = e.data.list;
                        o = o ? o.concat(a.data.list) : a.data.list, a.data.list.length <= 0 && (t = !0), 
                        e.setData({
                            list: o,
                            is_no_more: t,
                            p: n + 1
                        });
                    }
                },
                complete: function(t) {
                    a = !1, e.getApp.core.hideLoading();
                }
            });
        }
    }
		},
	}
</script>

<style scoped>
page {
    background-color: #fff;
}

.detail-header {
    height: 88upx;
    border-top: 1upx solid #e2e2e2;
    border-bottom: 1upx solid #e2e2e2;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    background-color: #fff;
}

.header {
    color: #353535;
    font-size: 14px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.income {
    height: 100%;
    width: 38%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.income.gain {
    border-bottom: 4upx solid #ff6f28;
    color: #ff6f28;
}

.income.hand {
    border-bottom: 4upx solid #ff6f28;
    color: #ff6f28;
}

.income-list {
    padding-top: 88upx;
}

.income-road {
    margin: 0 0upx 16upx 0upx;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-one {
    padding: 40upx 24upx;
    border-bottom: 1upx solid #e2e2e2;
}
</style>
